<template>
  <div v-show="showReadMenuBar" class="menu-bar">
    <ul>
    	<li  @click.stop="tapCates">
    		<span class="icon-list"></span>
        <span>目录</span>
    	</li>
    	<li @click.stop="tapSwitch" >
    		<span class="icon-list"></span>
        <span>{{isRollVertical?'纵轴':'横轴'}}</span>
    	</li>
    	<li @click.stop="tapPrevious">
    		<span class="icon-previous"></span>
        <span>上一章</span>
    	</li>
    	<li @click.stop="tapNext">
    		<span class="icon-next"></span>
        <span>下一章</span>
    	</li>
    </ul>
  </div>
</template>
<script>
import {Mixin} from '../../utils/mixin.js'

export default {
  mixins: [Mixin],
  methods: {
    tapCates() {
      console.log('click 目录')
      this.$emit('onCates')
    },
    tapSwitch() {
      this.$emit('onSwitch')
    },
    tapPrevious() {
      this.$emit('onPrevious')
    },
    tapNext() {
      this.$emit('onNext')
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../assets/style/color.scss";
@import "../../assets/style/mixin.scss";

.menu-bar {
    width: 100%;
    background-color: $color-bg-mask-7;
    ul {
    	height: 50px;
      @include center;
    	flex-direction: row;
    	li {
    		flex: 1;
        @include center;
        flex-direction: column;
        color: $color-text-f;
        span:nth-child(1) {
          font-size: $font-size-18;
        }
        span:nth-child(2) {
          font-size: $font-size-12;
        }
    	}
    }
}
</style>
